<template>
  <div class="lead-in">
    <div class="btn-wrap">
        <el-button type="info"
                   class="temp-download primary_btn">
          <a v-if="lang === 'zh_CN' || lang === 'zh_TW'" href="/static/template/user_test_zh_CN.xlsx" download>{{$t('km.downloadImport')}}</a>
          <a v-else href="/static/template/user_test_en.xlsx" download>{{$t('km.downloadImport')}}</a>
        </el-button>
        <div class="wrap_upload">
          <!--饿了么上传组件-->
          <el-upload class = "temp-upload"
            :action = "uploadUrl"
            name = "upload"
            accept = ".xls,.xlsx"
            :data = "uploadHeaders"
            :with-credentials = "true"
            :on-success = "handleSuccess"
            :before-upload = "beforeUpload"
            :show-file-list = "false">
            <span class="fileName">{{fileMes.trueName}}</span>
            <el-button class = "primary_btn" type="primary">{{$t('config.channel.choiceFiled')}}</el-button>
          </el-upload>
        </div>
      </div>
      <div class="instructions">
        <p v-for="item in explain">{{item}}</p>
      </div>
      <div class="footer">
        <el-button @click="close" class="primary_btn">{{$t('public.cancel')}}</el-button>
        <el-button type="primary" @click="lindInTem" class="primary_btn">{{$t('public.confirm')}}</el-button>
      </div>
  </div>
</template>
<script>
  import { deepClone, getDateNo } from '@/utils/m7Utils.js'
  export default {
    name: '',
    data () {
      return {
        lange: '',
        uploadUrl: '/fileUpload',
        uploadHeaders: {
          type: '',
          module: 'user',
          sessionId: this.$store.state.session.sessionId
        },
        fileMes: {
          trueName: this.$t('agentSetting.agentSetting47')
        },
        explain: [this.$t('monitor.monitorNotifyH6'), this.$t('webchat.monitor1'), this.$t('agentSetting.agentSetting48'), this.$t('agentSetting.agentSetting49'), this.$t('agentSetting.agentSetting50'), this.$t('agentSetting.agentSetting51'), this.$t('agentSetting.agentSetting52'), this.$t('agentSetting.agentSetting53')]
      }
    },
    components: {
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    computed: {
    },
    methods: {
      close () {
        this.$emit('closePopover')
      },
      beforeUpload (file) {
        let arr = file.name.split('.')
        let arrType = ['xls', 'xlsx']
        if (arrType.indexOf(arr[arr.length - 1]) !== -1) {
          return true
        } else {
          this.$message.error(this.$t('sms.uploadFileWrong'))
          return false
        }
      },
//      上传成功
      handleSuccess (response, file, fileList) {
        let index = response.filePath.split('/').length - 1
        let data = {
          trueName: response.fileName,
          fileName: response.filePath.split('/')[index]
        }
        this.fileMes = deepClone(data)
        this.$store.dispatch('getXlsHeads', data).then(res => {
          if (res.success) {
          }
        })
      },
      lindInTem () {
        if (this.fileMes.trueName === this.$t('agentSetting.agentSetting47')) {
          this.$message.error(this.$t('agentSetting.agentSetting55'))
          return
        }
        let obj = {
          batchNo: getDateNo()
        }
        let data = Object.assign(obj, this.fileMes)
        this.$store.dispatch('userTempImport', data).then(res => {
          if (res.success) {
            this.$message.success(this.$t('config.channel.ImportTemplateSuccess'))
            this.fileMes.trueName = this.$t('agentSetting.agentSetting47')
          } else {
            if (res.message === 'importing now') {
              this.$message(this.$t('agentSetting.agentSetting54'))
            }
          }
          this.$emit('lindInTemSuc')
        })
      }
    },
    beforeMount () {
      this.lang = window.localStorage.lang
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .lead-in
    // margin 0 auto
    padding 16px
    .footer
      text-align center
    .wrap_upload
      margin 16px 0
    .btn-wrap
      padding-bottom 10px
      overflow hidden
      .imp
        margin-top 10px
      .temp-download
        a
          color #fff
      .temp-upload
        display inline-block
        .temp-upload-btn
          font-size 12px
          padding 8px 15px
    .instructions
      clear both
      font-size 12px
      line-height 22px
      color $c-prompt
      margin-bottom 20px
  .fileName
    margin-right 20px
    font-size 12px
</style>
